<script setup lang="ts">
import menuService from '@/composables/menu'

const menus = menuService.menu.value
</script>

<template>
  <el-menu
      class="menu"
      mode="vertical"
      router
      :default-active="$route.path"
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
  >
    <el-menu-item index="/admin">首页</el-menu-item>
    <el-sub-menu v-for="(menu, index) in menus" :index="index + '1'" :key="index">
      <template #title>
        <i style="margin-right: 5px" :class="menu.icon"></i>
        <span>{{ menu.title }}</span>
      </template>
      <el-menu-item v-for="(smenu, subIndex) in menu.children" :index="smenu.path" :key="index">
        {{ smenu.title }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped lang="scss">
.menu {
  height: 100vh;
}
</style>
